<template>
  <div>
    <el-container>
      <el-header class="content-header">
        <div style="float: right">
          <el-button>
            <a @click="Return">
              <i class="el-icon-back"></i>
              返回
            </a>
          </el-button>
        </div>
      </el-header>

      <el-main class="info-main padding-style">
        <el-table :data="topData" border style="width: 100%">
          <el-table-column prop="userId" label="用户ID"></el-table-column>
          <el-table-column prop="userNumber" label="用户账号"></el-table-column>
          <el-table-column prop="userName" label="用户昵称"></el-table-column>
          <el-table-column prop="userMsId" label="会员等级"></el-table-column>
          <el-table-column prop="useState" label="已使用"></el-table-column>
          <el-table-column prop="notState" label="未使用"> </el-table-column>
          <el-table-column prop="timeOut" label="已过期"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- 筛选头头 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-search"></i>
            筛选查询
            <div class="rightTop">
              <a @click="packUp">
                <i class="el-icon-arrow-up"></i>
                收起筛选
              </a>
              <el-button @click="Submit()">查询结果</el-button>
            </div>
          </el-header>
          <!-- 筛选条件 -->
          <div class="goodsrecycle-button-select-2" v-if="showSelect">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="使用状态：">
                <el-select v-model.number="formInline.state" clearable>
                  <el-option label="已过期" :value="2"></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="订单编号：">
                <el-input
                  v-model.number="formInline.orderId"
                  placeholder="订单编号"
                  class="select-width-1"
                  clearable
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-container>
      </el-main>
    </el-container>

    <!-- 数据列表 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-s-unfold"></i>
            数据列表
            <div class="rightTop">
              <el-form
                :inline="true"
                :model="listLine"
                class="demo-form-inline"
              >
              
                <el-form-item label="" style="padding-top: 6px">
                  <el-select
                    v-model="listLine.sort"
                    placeholder="排序方式"
                    class="select-width-2"
                  >
                    <el-option label="时间" :value="0"></el-option>
                    <el-option label="订单状态" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                prop="disId"
                label="优惠码"
              ></el-table-column>
              <!-- <el-table-column
                prop="couponName"
                label="优惠劵名称"
              ></el-table-column> -->
              <!-- <el-table-column prop="faceAmount" label="面额"></el-table-column> -->
              <!-- <el-table-column
                prop="collectionMethod"
                label="领取方式"
              ></el-table-column> -->
              <el-table-column
                prop="getTime"
                label="领取时间"
              ></el-table-column>
              <el-table-column prop="state" label="当前状态">
                <template slot-scope="scope">
            <p v-if="scope.row.state==0">未使用</p>
              <p v-if="scope.row.state==1">已使用</p>
                 <p v-if="scope.row.state==2">已过期</p>
            </template>
              </el-table-column>
              <el-table-column prop="useTime" label="使用时间">
              </el-table-column>
              <el-table-column prop="orderId" label="订单编号">
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="look(scope.$index, scope.row)"
                    type="text"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>

          </el-footer>
        </el-container>
      </el-main>
    </el-container>
    <div>
      <el-dialog
        :title="'查看详情'"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
      >
        <el-form
          :inline="true"
          label-width="120px"
          :modal="formData"
          class="demo-form-inline"
          style="border: 1px solid black"
        >
          <el-form-item label="优惠码" >
            <el-input v-model="formData.discount.disId" disabled></el-input>
          </el-form-item>
          <el-form-item label="优惠劵名称">
            <el-input v-model="formData.discount.disName" disabled></el-input>
          </el-form-item>
          <el-form-item label="优惠券类型">
            <el-input v-model="formData.discount.disType" disabled></el-input>
          </el-form-item>
          <!-- <el-form-item label="可使用商品">
            <el-input v-model="formData.canUseGood" disabled></el-input>
          </el-form-item> -->
          <el-form-item label="使用门槛">
            <el-input v-model="formData.discount.useCondition" disabled></el-input>
          </el-form-item>
          <el-form-item label="面值">
            <el-input v-model="formData.discount.price" disabled></el-input>
          </el-form-item>
          <el-form-item label="适用平台">
            <el-input v-model="formData.discount.platform" disabled></el-input>
          </el-form-item>
          <el-form-item label="有效期">
            <el-input v-model="formData.discount.endTime" disabled></el-input>
          </el-form-item>
          <!-- <el-form-item label="领取方式">
            <el-input v-model="formData.disUse." disabled></el-input>
          </el-form-item> -->
          <el-form-item label="领取时间">
            <el-input v-model="formData.disUse.getTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="当前状态">
            <el-input v-model="formData.disUse.state" disabled></el-input>
          </el-form-item>
          <el-form-item label="使用时间">
            <el-input v-model="formData.disUse.useTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="formData.disUse.orderId" disabled></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import useApi from "@/api/user/list";
import disUseApi from "@/api/operate/disUse";
export default {
  data() {
    return {
      dialogVisible: false,
      // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
       total: 5,
      currentPage1: 1,
      // 
      showSelect: true,
      listLine: {
        row: "",
        sort: 0,
      },
      formInline: {
        state: '',
        orderId: ''
      },
      topData: [],
      formData: {
        discount:{},
        disUse:{},
      },
      tableData: [],

      userIdData:'',
    }
  },

  watch:{
    "listLine.sort":function(){

 this.indataTwo();

    }
  },
  methods: {
    packUp() {
      this.showSelect = !this.showSelect
      console.log("submit!")
    },
    Submit() {
      this.indataTwo();
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize=val;
      this.indataTwo();
    },
    handleCurrentChange(val) {
     this.currentPage1=val;
      this.indataTwo();
    },
    Return() {
      this.$router.go(-1)
    },
    look(index, row) {
      console.log(index, row)

      this.getData(row.id);
      this.dialogVisible = true
    },

    // 获取数据列表
    intdata(userId){
       useApi.getListByIdTwo(userId).then(response=>{
         console.log(response);
         this.topData[0]=response.data.data;
         this.$set(this.topData,0,response.data.data);
       })
    },

    // 获取数据列表2
    indataTwo(){
let dto={
pageNum:this.currentPage1,
pageSize:this.pageSize,
state:this.formInline.state,
orderId:this.formInline.orderId,
sort:this.listLine.sort,
useId:this.userIdData,

}
      disUseApi.getList(dto.pageNum, dto.pageSize,dto.state,dto.orderId,dto.sort,dto.useId).then(response=>{

        console.log(response);
        this.tableData=response.data.data.list;
        this.total=response.data.data.total;

      })
    },

    getData(id){
      disUseApi.getByUserId(id).then(response=>{

        console.log(response);
        this.formData.discount=response.data.data.discount;
        this.formData.disUse=response.data.data.disUse;

      })
    }
  },

  created(){

    this.userIdData=parseInt(this.$route.query.userId);
    this.intdata(this.userIdData);
     this.indataTwo();
  }
}
</script>
<style scoped>
.rightTop {
  float: right;
}
.goodsrecycle-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}
.select-width-1 {
  width: 220px;
}
.select-width-2 {
  width: 150px;
}
.centerTag {
  text-align: center;
}
.dateCss {
  float: left;
}
</style>
